<template>
  <el-transfer filterable v-model="hasRouterOrButton" @change="resourceChange" :left-default-checked="[]" :right-default-checked="[]" filter-placeholder="请输入搜索" :data="transferResourceData" :props="defaultProps" :titles="['可用接口', '已添加接口']" :button-texts="['移除', '添加']">
  </el-transfer>
</template>
<script>
import {findResourceByResourceQueryUsingPOST, deleteRouterAndResourcesRelationUsingDELETE, addRouterAndResourcesRelationUsingPOST,
  getHasResourceByRouter, getHasResourceByButton, deleteButtonAndResourcesRelationUsingDELETE, addButtonAndResourcesRelationUsingPOST} from '@api/systemManage'
export default {
  name: 'transferResource',
  props: {
    routerOrButtonId: {
      default: null, // 路由或者按钮id
      type: Number
    },
    type: {
      default: null, // 为按钮还是路由添加资源 '1':表示路由；‘2’：按钮
      type: String
    }
  },
  data () {
    return {
      selectData: [],
      transferResourceData: [],
      hasRouterOrButton: [], // 已有菜单或者按钮资源
      defaultProps: {
        key: 'id',
        label: 'name'
      }
    }
  },
  watch: {
    routerOrButtonId (val) {
      this.initPage()
    }
  },
  created () {
    this.initPage()
  },
  methods: {
    initPage () {
      this.getInterfaceByApp()
    },
    // 获取应用接口
    getInterfaceByApp () {
      let params = {
        'appId': this.$route.query.id,
        'name': null
      }
      findResourceByResourceQueryUsingPOST(params).then(res => {
        if (res.status) {
          this.transferResourceData = res.data.list
          if (this.type === '1') {
            this.getResourceByRouterId()
          } else {
            this.getResourceByButtonId()
          }
        }
      })
    },
    // 获取某按钮下资源
    getResourceByButtonId () {
      getHasResourceByButton(this.routerOrButtonId).then(response => {
        if (response.status && response.data.length) {
          this.hasRouterOrButton = response.data.map(item => {
            return item.id
          })
        } else {
          this.hasRouterOrButton = []
        }
      })
    },
    // 获取某一个路由下的资源
    getResourceByRouterId () {
      getHasResourceByRouter(this.routerOrButtonId).then(res => {
        if (res.status && res.data.length) {
          this.hasRouterOrButton = res.data.map(item => {
            return item.id
          })
        } else {
          this.hasRouterOrButton = []
        }
      })
    },
    // 获取应用按钮
    resourceChange (value, direction, movedKeys) {
      if (direction === 'left') {
        this.delResource(movedKeys)
      } else {
        this.addResource(movedKeys)
      }
    },
    // 添加资源'1':表示路由；‘2’：按钮
    addResource (keyArr) {
      if (this.type === '1') {
        addRouterAndResourcesRelationUsingPOST(this.routerOrButtonId, keyArr).then(res => {
          if (!res.status) {
            this.getResourceByRouterId()
          }
        })
      } else {
        addButtonAndResourcesRelationUsingPOST(this.routerOrButtonId, keyArr).then(res => {
          if (!res.status) {
            this.getResourceByButtonId()
          }
        })
      }
    },
    // 删除资源'1':表示路由；‘2’：按钮
    delResource (keyArr) {
      if (this.type === '1') {
        deleteRouterAndResourcesRelationUsingDELETE(this.routerOrButtonId, keyArr).then(res => {
          if (!res.status) {
            this.getResourceByRouterId()
          }
        })
      } else {
        deleteButtonAndResourcesRelationUsingDELETE(this.routerOrButtonId, keyArr).then(res => {
          if (!res.status) {
            this.getResourceByButtonId()
          }
        })
      }
    }
  }
}
</script>
